/*
  学习目标：props的两大特点
  
  
*/

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <Header
          name="zs"
          age={18}
          hobby={['睡觉', '吃饭']}
          child={{
            name: 'ls',
            age: 3,
          }}
          // 2. props可以传任意数据类型: 💥函数 , jsx
          // 💥函数
          fn={() => {
            alert('点我干啥');
          }}
          //  jsx
          title={<i>我是一个斜着的标签</i>}
        />
      </div>
    );
  }
}

function Header({ name, age, hobby, child, fn, title }) {
  console.log('title  ----->  ', title);
  return (
    <div>
      <h1>我是Header </h1>
      姓名: {name} <br />
      年龄: {age} <br />
      爱好: {hobby} <br />
      孩子: {child.name}
      <button onClick={fn}>点我</button>
      {title}
      <hr />
      <button
        onClick={() => {
          // 1. props是只读的
          // ❌以下代码都没有效果
          age++;
          hobby.push('打豆豆');
        }}
      >
        点我修改props
      </button>
    </div>
  );
}
